<template>
	<view class="work-detail">
		<view class="list-wrap">
			<view class="list-item">
				<view class="item-title">
					<text class="name">{{ form.workName }}</text>
					<text class="price">{{ form.salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">
							{{ form.remark }}
						</view>
					</view>
					<view class="flex-row">
						<view class="row">
							开工时间：<text class="light">{{ form.startTime | formatNow }}</text>
						</view>
						<view class="row">
							距离您<text class="light">{{ form.distance }}</text>公里
						</view>
					</view>
					<view class="flex-row">
						<view class="row">
							招聘人数：<text class="light">{{ form.realNum }}/{{ form.needNum }}</text>
						</view>
						<view class="row">
							发布时间：<text class="light">{{ form.crtDt | formatNow }}</text>
						</view>
					</view>
					<view class="img-box">
						<template v-for="(img, index) in form.atthUrls">
							<image v-if="img.fileType == 'image'" class="img" :key="index" :src="img.url" @click.stop="previewImageVideo(form, index)"></image>
							<video v-else class="img" :key="index" :src="img.url" :show-center-play-btn="false" :controls="false"
							 @click.stop="previewImageVideo(form, index)"></video>
						</template>
					</view>
				</view>
				<view class="btn-wrap">
					<u-button shape="circle" :custom-style="customStyle" @click="placeOrder(form)">接单</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable @close="closePop">
			<view class="d-login-btn">
				<template v-if="step == 1">
					<u-button class="d-btn" type="primary" shape="circle" open-type="getUserInfo" @getuserinfo="getuserinfo"
					 :custom-style="customStyle2">登录授权</u-button>
				</template>
				<template v-if="step == 2">
					<u-button class="d-btn" type="primary" shape="circle" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
					 :custom-style="customStyle2">授权手机号</u-button>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		formatYmdhm
	} from '@/common/filter.js';
	export default {
		name: 'workDetail', // 工作明细
		data() {
			return {
				show: false,
				customStyle: {
					'background': '#E04110',
					'border': 'none',
					'color': '#fff'
				},
				form: {
					id: '',
					workName: '',
					salary: '',
					remark: '',
					startTime: '',
					distance: '',
					realNum: '',
					needNum: '',
					crtDt: '',
					atthUrls: [],
				},
				customStyle2: {
					'background': '#5650ee'
				},
				step: 1,
				params: {
					sex: '',
					openId: '',
					sessionKey: '',
					encryptedData: '',
					iv: '',
					hidPic: '',
					realName: ''
				},
			}
		},
		onLoad(e) {
			this.form.id = e.id;
			this.getDetail();
			if (e.recId) {
				uni.setStorageSync('recId', e.recId);
			}
			if (e.recType) {
				uni.setStorageSync('recType', e.recType);
			}
		},
		methods: {
			getDetail() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						let params = {
							id: this.form.id,
							latitudes: res.latitude,
							longitudes: res.longitude
						}
						this.$u.api.postGetActivityInfo(params).then(res => {
							if (res.code == 1000) {
								let data = res.data;
								if (data) {
									this.form.workName = data.workName;
									this.form.salary = data.salary;
									this.form.remark = data.remark;
									this.form.startTime = data.startTime;
									this.form.distance = data.distance;
									this.form.realNum = data.realNum;
									this.form.needNum = String(data.needNum);
									this.form.crtDt = data.crtDt;
									this.form.atthUrls = data.atthUrls;
								}
							}
						})
					},
					fail() {
						this.$u.toast('请授权位置权限！');
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
				})
			},
			previewImageVideo(item, index) { // 预览图片视频
				uni.navigateTo({
					url: '/pages/preview/index?id=' + item.id + '&index=' + index
				})
			},
			placeOrder(item) { // 接单
				let token = uni.getStorageSync('token');
				if (token) {
					let params = {
						id: item.id
					}
					this.$u.api.postReceiving(params).then(res => {
						if (res.code == 1000) {
							uni.navigateTo({
								url: '/pages/order/pay-deposit?id=' + res.data.id + '&deposit=' + res.data.deposit
							})
						}
					})
				} else {
					this.show = true;
				}
			},
			
			// 获取微信用户信息
			getuserinfo(e) {
				this.params.sex = e.detail.userInfo.gender;
				this.params.hidPic = e.detail.userInfo.avatarUrl;
				this.params.realName = e.detail.userInfo.nickName;
				// 获取微信openid
				this.postGetWechatOpenId();
			},
			// 获取微信openid
			postGetWechatOpenId() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.$u.api
							.postGetWechatOpenId({
								code: loginRes.code
							})
							.then(res => {
								console.log(res, '[登录页面-获取微信openid]');
								this.params.openId = res.data.data;
								this.params.sessionKey = res.data.sessionKey;
								uni.setStorageSync('openId', this.params.openId);
								if (!!res.data.phone) {
									// 登录
									this.postLoginCheck();
								} else {
									this.step = 2;
									uni.showToast({
										title: '请授权手机号',
										icon: 'none'
									})
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				});
			},
			// 授权手机号
			getphonenumber(e) {
				console.log(e)
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.params.encryptedData = e.detail.encryptedData;
					this.params.iv = e.detail.iv;
					// 登录
					this.postLoginCheck();
				}
			},
			// 登录
			postLoginCheck() {
				let params = {
					...this.params,
					recId: uni.getStorageSync('recId'),
					recType: uni.getStorageSync('recType')
				}
				this.$u.api
					.postLoginCheck(params)
					.then(res => {
						if (res.code == 1000) {
							this.step = 1;
							this.show = false;
							uni.setStorageSync('token', res.data)
							// 获取用户信息
							this.postGetAdminInfo().then(() => {
								uni.switchTab({
									url: './index/index'
								})
							})
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取用户信息
			postGetAdminInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api
						.postGetAdminInfo()
						.then(res => {
							if (res.code == 1000) {
								this.$store.commit('commitMobile', res.data.mobile);
								this.$store.commit('commitUserId', res.data.id);
								uni.setStorageSync('userId', res.data.id);
							}
							resolve();
						})
						.catch(err => {
							console.log(err);
							reject();
						});
				})
			},
			closePop() {
				this.step = 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-detail {
		.list-wrap {
			padding: 20rpx;
			position: relative;
			z-index: 10;

			.list-item {
				padding: 30rpx 20rpx;
				background: #fff;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
				border-radius: 6px;
				margin-bottom: 20rpx;

				.item-title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: rgba(101, 101, 101, 1);
					}

					.price {
						font-size: 26rpx;
						font-weight: bold;
						color: rgba(236, 71, 21, 1);
					}
				}

				.item-con {
					border-bottom: 1px solid rgba(221, 221, 221, 1);
					padding-bottom: 10rpx;

					.con-row {
						display: flex;
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(101, 101, 101, 1);
						line-height: 34rpx;
						margin-bottom: 18rpx;

						.txt {
							flex: none;
							color: #999;
							margin-right: 10rpx;
						}

						.txt-info {
							flex: 1;
						}
					}

					.flex-row {
						display: flex;
						justify-content: space-between;

						.row {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(153, 153, 153, 1);
							margin-bottom: 18rpx;
						}
					}

					.img-box {
						flex: 1;
						margin-right: 20rpx;

						.img {
							width: 90rpx;
							height: 90rpx;
							border-radius: 6px;
							margin-right: 10rpx;
						}
					}
				}

				.btn-wrap {
					margin-top: 22rpx;
				}

				.light {
					color: #333;
					margin: 0 6rpx;
				}
			}
		}
		.d-login-btn {
			padding: 120rpx 40rpx 100rpx;
		}
	}
</style>
